<template>
  <div>
    <nut-input v-model="email" @change="change" type="text" max-length="100" label="邮箱"
               placeholder="请输入邮箱" require-show="true"/>
    <nut-input v-model="password" @change="change" type="password" label="旧密码" placeholder="请输入您的旧密码"
               require-show="true"/>
    <nut-input v-model="password1" @change="change" type="password" label="新密码" placeholder="请输入您的新密码"
               require-show="true"/>
    <div style="position:relative;">
      <nut-row>
        <nut-col :span="24">
          <div class="flex-content">
            <nut-input v-model="verify" @change="change" type="text" max-length="4"
                       label="验证码"
                       placeholder="请输入验证码" require-show="true"/>
          </div>
        </nut-col>
        <nut-col :span="24">
          <div class="flex-content">
            <nut-button class="findPassword_verify" :loading="isLoadingVerify" type="default" @click="handleToVerify"
                        :disabled="disabled">
              {{ verifyInfo }}
            </nut-button>
          </div>
        </nut-col>
      </nut-row>
    </div>

    <div class="findPassword_button">
      <nut-button block :loading="isLoading" type="primary" @click="handleToPassword" color="#e54847">提交</nut-button>
    </div>
    <div class="findPassword_link">
      <router-link to="/mine/login">立即登录</router-link>
      <router-link to="/mine/register">立即注册</router-link>
    </div>
  </div>
</template>

<script>
import {reactive, ref, getCurrentInstance, toRefs} from 'vue';
import {Toast} from '@nutui/nutui';

export default {
  name: "FindPassword",
  data() {
    return {
      email: '',
      password: '',
      password1: '',
      verify: '',
      verifyInfo: '发送验证码',
      disabled: false
    }
  },
  setup() {
    const state = reactive({});
    let {proxy} = getCurrentInstance();

    let isLoading = ref(false);
    const handleToPassword = () => {
      isLoading.value = true;
      setTimeout(() => {
        isLoading.value = false;
        proxy.$axios.post('/api2/users/findPassword', {
          email: proxy.email,
          password: proxy.password,
          verify: proxy.verify
        }).then((res) => {
          const status = res.data.status;
          const This = proxy;
          if (status === 0) {
            Toast.success('修改密码成功');
            This.email = '';
            This.verify = '';
            This.password = '';
            This.password1 = '';
            This.$router.push('/mine/login')
          } else {
            Toast.fail('修改密码失败');
          }
        });
      }, 618);
    };

    let isLoadingVerify = ref(false);
    const handleToVerify = () => {
      isLoadingVerify.value = true;
      setTimeout(() => {
        isLoadingVerify.value = false;
        if (proxy.disabled) {
          return;
        }
        proxy.$axios.get('/api2/users/verify?email=' + proxy.email).then((res) => {
          const status = res.data.status;
          const This = proxy;
          if (status === 0) {
            Toast.success('验证码已发送');
            This.countDown();
          } else {
            Toast.fail('验证码发送失败');
          }
        });
      }, 618);
      // console.log(event)

    }
    const change = (value, event) => {
      console.log('change: ', value, event);
    };

    return {
      state,
      change,
      handleToVerify,
      handleToPassword,
      isLoading,
      isLoadingVerify,
      proxy,
      ...toRefs(state),
    }
  },
  methods: {
    countDown() {
      this.disabled = true;
      let count = 60;
      const timer = setInterval(() => {
        count--;
        this.verifyInfo = '剩余' + count + '秒';
        if (count === 0) {
          this.disabled = false;
          count = 60;
          this.verifyInfo = '发送验证码';
          clearInterval(timer);
        }
      }, 1000);
    }
  }
}
</script>

<style scoped>
.findPassword_verify {
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 40px;
  z-index: 999;
}


.findPassword_button {
  /*height: 50px;*/
  margin: 10px;
}

.findPassword_link {
  display: flex;
  justify-content: space-between;
}

.findPassword_link a {
  text-decoration: none;
  margin: 0 5px;
  font-size: 12px;
  color: #e54847;
}
</style>